<template>
  <div>
    <el-row>
      <el-col :span="6">
        <h3 id="orderContentH3">服务费渠道分析</h3>
        <div id="echart1"></div>
      </el-col>
      <el-col :span="9">
        <h3 id="orderContentH3">用户服务费渠道分析</h3>
        <div id="echart3"></div>
      </el-col>
      <el-col :span="9">
        <h3 id="orderContentH3">第三方服务费分析</h3>
        <div id="echart2"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import utils from "../../js/index";
export default {
  watch: {
    echart1(a, b) {
      this.meDataList(utils.utils.fenList(a));
      this.echart1 = a;
    },
    deep: true,
  },
  props: ["echart1"],
  data() {
    return {
      echartData1: [],
    };
  },
  mounted() {
    if (this.echart1.length == 0) {
      return;
    }
  },
  methods: {
    list1(arr) {
      let bgColor = "#fff";
      let title = "总量";
      let echartData = arr;
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);
      var option = {
        color: [
          "#52E5E7",
          "#FFAA85",
          "#28C76F",
          "#736EFE",
          "#3677FF",
          "#E96D71",
        ],
        backgroundColor: bgColor,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: "80px",
          left: "10px",
          data: this.optionsTitle1(arr),
        },
        series: [
          {
            name: "服务费",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: echartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      return option;
    },
    list2(arr) {
      let bgColor = "#fff";
      let title = "总量";
      let echartData = arr;
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      var option = {
        color: ["#32CCBC", "#97ABFF", "#6B73FF", "#EE9AE5"],
        backgroundColor: bgColor,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: "80px",
          left: "30px",
          data: this.optionsTitle1(arr),
        },
        series: [
          {
            name: "服务费",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: echartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      return option;
    },
    optionsTitle1(arr) {
      var list = [];
      arr.forEach((i) => {
        list.push(i.name);
      });
      return list;
    },
    meDataList(data) {
      var arr1 = [];
      var arr2 = [];
      var arr3 = [];
      var arr4 = [];
      data.forEach((e) => {
        if (
          e.traderaccount == "hn96520" ||
          e.traderaccount == "wechat" ||
          e.traderaccount == "wechathn96520" ||
          e.traderaccount == "atm"
        ) {
          arr1.push({ value: e.oldprice, name: "用户" });
          arr4.push({ value: e.oldprice, name: e.traderaccount });
        } else {
          arr2.push({ value: e.oldprice, name: "第三方" });
          arr3.push({ value: e.oldprice, name: e.traderaccount });
        }
      });
      this.carried(data);
      this.carried2(arr3);
      this.carried3(arr4);
    },
    carried2(arr) {
      var echart2 = echarts.init(document.querySelector("#echart2"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.list1(arr), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    carried3(arr) {
      var echart2 = echarts.init(document.querySelector("#echart3"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.list2(arr), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    options(arr) {
      var arrList = arr.map((e) => {
        return { value: e.oldprice, name: e.traderaccount };
      });
      var option = {
        color: [
          "#32CCBC",
          "#97ABFF",
          "#6B73FF",
          "#EE9AE5",
          "#52E5E7",
          "#FFAA85",
          "#28C76F",
          "#736EFE",
          "#3677FF",
          "#E96D71",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          show: false,
          orient: "vertical",
          left: 10,
          data: arrList.map((e) => {
            return e.name;
          }),
        },
        series: [
          {
            name: "分销商",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: arrList,
          },
        ],
      };
      return option;
    },
    calcNum(e, name) {
      var num = 0;
      e.forEach((item) => {
        num += Number(item.value);
      });
      return { value: num, name: name };
    },
    Color() {
      return `rgba(${Math.floor(Math.random() * 255)},${Math.floor(
        Math.random() * 255
      )},${Math.floor(Math.random() * 255)}),0.8`;
    },
    calcNum2(e) {
      var arr = [];
      e.forEach((i) => {
        arr.push({
          value: i.value,
          name: i.name,
          //   itemStyle: {
          //     color: this.Color(),
          //     borderColor: this.Color(),
          //     borderWidth: 3,
          //   },
        });
      });
      return arr;
    },

    carried(arr) {
      var echart1 = echarts.init(document.querySelector("#echart1"));
      echart1.clear(); //先清除图表
      echart1.setOption(this.options(arr), true);
      echart1.hideLoading(); //关闭loading
      // 点击图表监听事件
      // echart1.on("click", function (p) {
      //   console.log(p);
      // });
    },
  },
};
</script>
<style scoped>
#echart1,
#echart2,
#echart3 {
  /* display: inline-block; */
  width: auto;
  height: 350px;
}
#echart1 {
  width: 320px;
  /* height: 320px; */
}
#echart1 {
  position: relative;
  top: 20px;
  /* bottom: 100px;
}
#echart2 {
  /* position: relative;
  left: 15%;
  bottom: 25px; */
}
#orderContentH3 {
  /* width: 95%; */
  /* margin: 0 auto; */
  padding-left: 50px;
}
</style>